ElementUI表格动态设置表头label数据

2023-07-28 01:49| 来源: 网络整理| 查看: 265

业务需求：需要使用Element组件库做一个table表头动态改变的数据table

文章目录分析问题解决问题结果展示

分析问题

我们使用Element的table，常用的方式是通过绑定需要的表格data数据，数据格式为对象数组。这时，对于表头的label，我们通常是直接写label=‘姓名’

/*label='序号'*/ {{scope.$index+1}}

但是，以上两种方式都是在已知表头数据长度的情况下使用的，如果我们遇到表头数据长度不确定的情况下我们应该怎么办呢？请接着往下看~

解决问题

对于表头数据长度不确定的情况，我们就不能将表头内容写了，我们可以采用遍历表头的方法来达成我们的需求：

/*我们可以在此处遍历表头的数据dataHeader 然后绑定给label*/ {{scope.row[index]}} //data dataHeader: ['序号','姓名','年龄'], dataInfo: [{id:1,name:'qc',age:20}],

不知道大家注意到没有，遍历表头数据的话我们就需要将表头数据单独拎到一个数组中，也就是说我们从后台获取到数据之后，需要对请求到的表格数据进行简单处理，这里大家不要忘咯！！！

结果展示

最后就成功的将表头数据遍历出来啦在这里插入图片描述

end~~~

鉴于笔者水平有限，若

【本文地址】

今日新闻